<template>
    <div class="attendance-container">
        <div>
            <el-input v-model="searchForm.name" size="small" placeholder="请输入人员姓名" clearable
                class="search-input"></el-input>
            <el-select v-model="searchForm.department" size="small" placeholder="请选择人员部门" class="search-input"
                clearable>
                <el-option v-for="department in departments" :key="department" :label="department"
                    :value="department"></el-option>
            </el-select>
            <el-select v-model="searchForm.signIn" size="small" placeholder="请选择出勤情况" class="search-input" clearable>
                <el-option v-for="attendance in attendances" :key="attendance" :label="attendance"
                    :value="attendance"></el-option>
            </el-select>
            <el-button type="primary" size="small" round @click="getUserList">查找</el-button>
        </div>

        <div class="summary-box">
            <div class="attendance-summary">
                <img src="../../assets/attendance/1.png">
                <div>
                    <div class="attendance-title">今日正常签到</div>
                    <div class="attendance-num">{{ attendanceToday.normal }} 人</div>
                    <div class="attendance-yesterday">
                        <span>昨日</span>
                        <span>{{ attendanceYesterday.normal }} 人</span>
                    </div>
                </div>
            </div>
            <div class="attendance-summary">
                <img src="../../assets/attendance/2.png">
                <div>
                    <div class="attendance-title">今日迟到人数</div>
                    <div class="attendance-num">{{ attendanceToday.late }} 人</div>
                    <div class="attendance-yesterday">
                        <span>昨日</span>
                        <span>{{ attendanceYesterday.late }} 人</span>
                    </div>
                </div>
            </div>
            <div class="attendance-summary">
                <img src="../../assets/attendance/3.png">
                <div>
                    <div class="attendance-title">今日请假人数</div>
                    <div class="attendance-num">{{ attendanceToday.leave }} 人</div>
                    <div class="attendance-yesterday">
                        <span>昨日</span>
                        <span>{{ attendanceYesterday.leave }} 人</span>
                    </div>
                </div>
            </div>
            <div class="attendance-summary">
                <img src="../../assets/attendance/4.png">
                <div>
                    <div class="attendance-title">今日签退人数</div>
                    <div class="attendance-num">{{ attendanceToday.signOut }} 人</div>
                    <div class="attendance-yesterday">
                        <span>昨日</span>
                        <span>{{ attendanceYesterday.signOut }} 人</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="table-box">
            <el-table :data="attendanceData" style="width: 100%" :cell-style="cellStyle">
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="post" label="岗位" align="center"></el-table-column>
                <el-table-column prop="department" label="所属部门" align="center"></el-table-column>
                <el-table-column prop="entryDate" label="入职时间" align="center"></el-table-column>
                <el-table-column prop="signIn" label="今日出勤" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.signIn === '' ? '未签到' : scope.row.signIn }}
                    </template>
                </el-table-column>
            </el-table>
            <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" :pageSizes="null"
                @pagination="getUserList" />
        </div>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'

export default {
    components: {
        Pagination
    },
    data() {
        return {
            searchForm: {
                name: '',
                department: '',
                signIn: ''
            },
            attendances: ['正常', '请假', '迟到'],
            departments: [
                '项目管理部',
                '设计部',
                '施工部',
                '安全管理部',
                '质量控制部',
                '采购部',
                '财务部',
                '人力资源部',
                '法务部',
                '环境管理部',
                '技术支持部',
                '设备管理部'
            ],
            attendanceToday: {},
            attendanceYesterday: {},
            attendanceData: [],
            total: 0,
            listQuery: {
                page: 1,
                limit: 7
            }
        }
    },
    mounted() {
        this.getUserList()
        this.getAttendanceData()
    },
    methods: {
        getUserList() {
            this.axios.post(`http://139.9.77.245:8081/employee/${this.listQuery.page}/${this.listQuery.limit}`, this.searchForm).then(res => {
                if (res.data.code === 0) {
                    console.log(res.data)
                    this.attendanceData = res.data.data.records
                    this.total = res.data.data.total
                }
            })
        },
        getAttendanceData() {
            this.axios.get('http://139.9.77.245:8081/employee/attendance').then(res => {
                if (res.data.code === 0) {
                    this.attendanceToday = res.data.data[0]
                    this.attendanceYesterday = res.data.data[1]
                }
            })
        },
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 4) {
                if (row.signIn === '正常') {
                    return { 'color': '#000' }
                } else {
                    return { 'color': '#f00' }
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.attendance-container {
    padding: 10px 15px;
    width: 100%;
    height: 100%;
    background-color: #eee;
}

.search-input {
    width: 200px;
    margin-right: 10px;
}

.summary-box {
    margin-top: 10px;
    display: flex;
}

.attendance-summary {
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 310px;
    margin: 0 10px;

    img {
        width: 120px;
        margin-right: 25px;
    }

    .attendance-title {
        font-size: 16px;
        color: #999;
    }

    .attendance-num {
        font-size: 30px;
        font-weight: bold;
        color: #000;
        margin-top: 5px;
        margin-left: 5px;
    }

    .attendance-yesterday {
        font-size: 14px;
        color: #818181;
        margin-top: 15px;
        display: flex;
        justify-content: space-between;
        padding: 0 5px;
    }
}

.table-box {
    background-color: #fff;
    border-radius: 10px;
    padding: 8px;
    margin: 10px;
}
</style>